import LivePlayer from '@/components/LivePlayer'
import { getLiveBackDetail, getShortVideoDetail, getLiveBackSlide, getSlideVideoBack } from '@/server/news'
import { getLiveRoomDetail } from '@/server/live'
import Page from '@/components/Layout'
import styles from './styles.module.scss'
import { Breadcrumb } from 'antd';
import Title from '@/components/Title'
import Hotscore from '@/assets/hotscore.png'
import Link from 'next/link'
import { NavList } from '@/common/enum'
import { useEffect, useRef } from 'react'
import RenderJudge from '@/components/RenderJudge'
import LiveMobile from '@/components/H5/Live'

const LiveBack = ({ liveInfo, type, bottomData, eventId, mobile }) => {
  const playRef = useRef(null)
  let { newLiveUrl: liveUrl, matchTime } = liveInfo[0]
  const typeText = {
    [process.env.NEXT_PUBLIC_Football]: {
      name: "足球",
      link: "/onlinelive/football"
    },
    [process.env.NEXT_PUBLIC_Basketball]: {
      name: "篮球",
      link: "/onlinelive/basketball"
    }
  }
  useEffect(() => {
    playRef.current?.create();
  }, [liveUrl])


  const eventText = () => {
    if (eventId === "") return <></>
    const item = [NavList.a, ...NavList.f, ...NavList.b]?.find(row => row?.id === Number(eventId))
    return (
      <Breadcrumb.Item href={Reflect.get(typeText, type)?.link + `/${eventId}/${item?.name}`}>{item?.name + "直播"}</Breadcrumb.Item>
    )
  }
  return (
    <RenderJudge active={
      <LiveMobile liveInfo={liveInfo} mobile={mobile}></LiveMobile>
    } value={mobile} inactive={
      <>
        <nav className={styles.nav}>
          <Breadcrumb separator=">">
            <Breadcrumb.Item href='/'>首页</Breadcrumb.Item>
            <Breadcrumb.Item href={`${Reflect.get(typeText, type)?.link}`}>{Reflect.get(typeText, type)?.name + '直播'}</Breadcrumb.Item>
            {eventText()}
            <Breadcrumb.Item>{liveInfo?.[0]?.matchName}</Breadcrumb.Item>
          </Breadcrumb>
        </nav>
        <header className={styles.liveTitle}>
          <div>
            <h1>{`${liveInfo?.[0]?.eventName} | ${liveInfo?.[0]?.matchName}`}</h1>
            <i>{liveInfo?.[0]?.fromTime}</i>
          </div>
          <Link href="/">
            <a>鑫球体育</a>
          </Link>
        </header>
        <section className={styles.liveBack}>
          <section className={styles.player}>
            <LivePlayer ref={playRef} data={liveUrl} matchTime={matchTime} />
          </section>
        </section>

        <aside className={styles.bottomBlock}>
          <blockquote style={{ height: 20 }}></blockquote>
          <Title img={Hotscore} text="精彩视频"></Title>
          <blockquote style={{ height: 20 }}></blockquote>
          <section className={styles.blocks}>
            {bottomData?.map(row => (
              <Link href={`/marvellous/${Number(type) === 1 ? 'football' : 'basketball'}/${row?.id}`} key={row?.id}>
                <a>
                  <img src={row?.videoImg || row?.coverImg} loading="lazy" />
                  <p className='textoverone'>{row?.videoName || row?.title}</p>
                </a>
              </Link>
            ))}
          </section>
        </aside>
      </>
    } />
  )
}
LiveBack.getLayout = (page, props) => {
  return (
    <Page header footer {...props}>
      {page}
    </Page >
  )
}

export async function getServerSideProps (ctx) {


  const [type, id] = ctx.params?.id
  const eventId = ctx.params?.id?.[2] || ""

  const res = await getLiveRoomDetail({ eventType: type, matchId: id })
  console.log(res)
  const [bottomData = []] = await Promise.all([getSlideVideoBack({
    num: 6, type: 5, typeGeneral: res[0]?.matchType, eventName: res[0]?.eventName
  })])
  return {
    props: {
      liveInfo: res,
      id,
      type,
      eventId,
      bottomData
    }
  }
}

export default LiveBack